<template>
	<div class="common-footer">
		<div class="footer-join" @click="goPage('/profile')">
			<div class="join-now">{{$t('myFoot.Now')}}</div>
		</div>
		<div class="footer-content">
			<ul class="footer-content-nav">
				<li @click='goPage("/About")'>{{$t('myFoot.About')}}</li>
				<li @click='goPage("/termsOfUse")'>{{$t('myFoot.Use')}}</li>
				<li @click='goPage("/privacyPolicy")'>{{$t('myFoot.Policy')}}</li>
				<li @click='goPage("/contact")'>{{$t('myFoot.Contact')}}</li>
			</ul>
			<ul class="footer-content-logo">
				<a target="_blank" href="https://www.facebook.com/Killys-Rebate-101392981845187">
					<li></li>
				</a>
				<a target="_blank" href="https://www.instagram.com/killysfreebiesandmore/">
					<li style="background-position-x: -153px;"></li>
				</a>
			</ul>
			<div class="footer-content-info">
				{{$t('myFoot.Copyright')}}
			</div>
		</div>
		<!-- 移动端 -->


		<div class="mb-footer-top">
			<img src="../../assets/image/logo.png" alt="">
			<p>
				{{$t('footer.SaveMottwebsite')}}
			</p>
		</div>
		<div class="mb-footer-content">
			<div class="footer-nav">
				<span @click='goPage("/About")'>{{$t('footer.AboutUs')}}</span>
				<i>|</i>
				<span @click='goPage("/termsOfUse")'>{{$t('footer.TermsofUse')}}</span>
				<i>|</i>
				<span @click='goPage("/helpPage")'>{{$t('footer.Help')}}</span>
			</div>
			<div class="footer-nav">
				<span @click='goPage("/privacyPolicy")'> {{$t('footer.PrivacyPocy')}}</span>
				<i>|</i>
				<span @click='goPage("/contact")'> {{$t('footer.ContactUs')}}</span>
			</div>
		</div>
		<div class="mb-footer-bottom">
			<div class="footer-shares">
				<a target="_blank">
					<img src="../../assets/image/home/facebook.svg" alt="">
				</a>
				<a target="_blank">
					<img src="../../assets/image/home/twitter.svg" alt="">
				</a>
			</div>
			<p class="info">
				{{$t('footer.CopyrightInfo')}}
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'my-footer',
		data() {
			return {}
		},
		created() {},
		mounted() {},
		methods: {
			goPage(url) {
				this.$router.push(url)
			}
		},
		components: {},
	}
</script>

<style lang='scss' scoped>
	.common-footer {
		text-align: center;
	}

	/* 移动端 */
	.mb-footer-top {
		border-top: .05rem solid #ddd;

		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}

		img {
			width: 12.1rem;
			margin-top: 1rem;
		}

		p {
			font-size: .8rem;
			font-family: Roboto-Bold;
			color: #ff5900;
			line-height: 1.2rem;
		}
	}

	.mb-footer-content {
		padding: .5rem 0;
		text-align: center;
		width: 100%;
		margin: auto;

		display: none;

		@media screen and (max-width: 900px) {
			display: block;
		}

		.footer-nav {
			font-size: .4rem;
			color: #666;
			margin: 0 auto;
			overflow: hidden;
			display: flex;
			justify-content: center;

			span {
				color: #666;
				display: inline-block;
				line-height: 1.5rem;
			}

			i {
				font-style: normal;
				line-height: 1.5rem;
				margin: 0 .8rem;
				font-size: .8rem;
				vertical-align: middle;

			}
		}
	}

	.mb-footer-bottom {
		display: none;
		padding-bottom: 3rem;

		@media screen and (max-width: 900px) {
			display: block;
		}

		.info {
			margin-top: .6rem;
			font-size: .45rem;
			color: #757575;
		}

		.footer-shares {
			display: flex;
			align-items: center;
			justify-content: center;

			a {

				width: 1.5rem;
				height: 1.5rem;
				margin-left: .4rem;
				display: inline-block;
				cursor: pointer;
				color: #ff5900;
			}

			img {
				max-width: 100%;
				display: block;
			}
		}
	}

	/* pc端 */
	.footer-content-info {
		border-color: #7d7d7d;
		color: #656565;
		padding: 30px;
		border-top: 1px solid #656565;
		text-align: center;

		@media screen and (max-width: 900px) {}
	}

	.footer-content-logo {
		display: flex;
		justify-content: center;
		padding-bottom: 50px;

		li {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 15px;
			background: url(../../assets/image/social-media.png) 0 -51px no-repeat;
			cursor: pointer;

		}
	}

	.footer-content {

		@media screen and (max-width: 900px) {
			display: none;
		}
	}

	.footer-content-nav {
		margin: auto;
		width: 500px;
		height: 150px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;

		@media screen and (max-width: 900px) {
			font-size: .6rem;
			color: #666;
			margin: 0 auto;
			overflow: hidden;
		}

		li {
			height: 20px;
			line-height: 20px;
			border-left: 1px solid #000;
			text-align: center;
			padding: 0 10px;

			&:first-child {
				border: none;
			}
		}
	}

	.footer-join {
		background-color: #ff5900;
		background: url(../../assets/image/home/HomePage_img_banne_04.png);
		font-size: 34px;
		text-align: center;
		overflow: hidden;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;

		@media screen and (max-width: 900px) {
			display: none;
		}

		.join-now {
			width: 166px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			color: #ff5900;
			background-color: #fff;
			border-radius: 25px;
			font-size: 22px;
			cursor: pointer;
		}
	}
</style>
